<template>
    <el-dialog :title="title" @close="handleClose" :visible="visible" width="700px" center :close-on-click-modal="false">
        <el-form :model="formInline" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="demo-ruleForm">
            <el-form-item label="用户姓名：" prop="name">
                <el-input v-model="formInline.name" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
            </el-form-item>
            <el-form-item label="登录账号：" prop="account" v-if="path == 'add'">
                <el-input v-model="formInline.account" placeholder="请输入手机号" maxlength="11"
                    :style="{ width: inputWidth }"></el-input>
            </el-form-item>
            <el-form-item label="登录密码：" prop="password" v-if="path == 'add'">
                <el-input v-model="formInline.password" placeholder="请输入" show-password
                    :style="{ width: inputWidth }"></el-input>
            </el-form-item>
            <el-form-item label="修改登录密码：" v-if="path == 'edit'">
                <el-input v-model="formInline.password" placeholder="请输入" show-password
                    :style="{ width: inputWidth }"></el-input>
            </el-form-item>
            <el-form-item label="可管理门店：" prop="merchantIdList">
                <el-select v-model="formInline.merchantIdList" multiple filterable placeholder="请选择"
                    :style="{ width: inputWidth }">
                    <el-option v-for="item in shopList" :key="item.merchantId" :label="item.shopName"
                        :value="item.merchantId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button style="margin-right: 30px" @click="handleClose">取消</el-button>
                <el-button type="primary" :loading="buttonLoading" @click="submitForm('ruleForm')"
                    v-if="path == 'add'">确认</el-button>
                <el-button type="primary" :loading="buttonLoading" @click="submitForm('ruleForm')"
                    v-if="path == 'edit'">确认</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</template>
<script>
// api
import {
    chainUserAdd, userShopSelect, chainUserDetail, chainUserUpdate
} from "@/api/syChainManagement/syChainManagement.js";

export default {
    props: {
        visible: Boolean,
        id: String,
        path: String,
    },
    data() {
        var checkPassword = (rule, value, callback) => {
            let regNumber = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/; //6-12位数字加字母组成
            if (!value) {
                return callback(new Error("请输入登录密码"));
            } else if (
                regNumber.test(value) == false
            ) {
                return callback(new Error("请输入6-12位数字加字母组成密码"));
            } else {
                return callback();
            }
        };
        return {
            labelWidth: '120px',
            inputWidth: '360px',
            loading: false,
            formInline: {
                account: "", //登录帐号
                chainId: "",//连锁id
                id: '',//编辑id
                merchantIdList: [],//可管理门店
                name: "", //用户姓名
                password: "", //密码
            },
            show: true,
            readonlyInput: true,
            buttonLoading: false,
            shopList: [],
            title: '添加管理员',
            rules: {
                name: [
                    { required: true, message: '请输入用户姓名', trigger: ['blur', 'change'] },
                ],
                account: [
                    { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
                    {
                        validator: (rule, value, callback) => {
                            if (/^1[3456789]\d{9}$/.test(value) == false) {
                                callback(new Error("请输入正确手机号"));
                            } else {
                                callback();
                            }
                        },
                        trigger: ['change', 'blur']
                    }
                ],
                password: [
                    { required: true, validator: checkPassword, trigger: ['blur', 'change'] },
                ],
                merchantIdList: [
                    { required: true, message: '请选择门店', trigger: ['blur', 'change'] }
                ],

            }
        };
    },
    created() {
        this.formInline.chainId = this.$route.query.id;
        this.chainusershop()
        if (this.path == 'edit') {
            this.title = '编辑管理员'
            this.lookDetail()
            this.show = false
        } else {
            this.title = '添加管理员'
        }
    },
    methods: {
        //获取门店下拉框
        chainusershop() {
            var params = {
                chainId: this.formInline.chainId
            }
            userShopSelect(params).then(res => {
                this.shopList = res.result
            })
        },
        lookDetail() {
            //点击编辑
            let id = this.id;
            chainUserDetail(id).then((res) => {
                this.formInline = res.result;
            });
        },
        //编辑
        clickEdit() {
            const params = {
                name: this.formInline.name,
                password: this.formInline.password,
                merchantIdList: this.formInline.merchantIdList,
                id: this.id,
            };
            this.buttonLoading = true;
            chainUserUpdate(params)
                .then((res) => {
                    this.$message({
                        message: "修改成功",
                        type: "success",
                        duration: 1500,
                    });
                    this.buttomLoading = false;
                    this.$emit('success')
                    this.handleClose()
                })
                .finally(() => {
                    this.buttonLoading = false;
                });
        },
        addChainUser() {
            //新增
            const params = {
                ...this.formInline,
            };
            this.buttonLoading = true;
            chainUserAdd(params)
                .then((res) => {
                    this.$message({
                        message: "添加成功",
                        type: "success",
                        duration: 1500,
                    });
                    this.buttomLoading = false;
                    this.$emit('success')
                    this.handleClose()
                })
                .finally(() => {
                    this.buttonLoading = false;
                });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.path == 'add') {
                        this.addChainUser()
                    } else if (this.path == 'edit') {
                        this.clickEdit()
                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleClose() {
            this.$emit("update:visible", false);
        },
    },
};
</script>
<style lang="scss" scoped></style>
  